<template>
    <div class="box2 flex-item-1 banggo_wap_floopy_box" v-if="filterPopupStateData">
        <span id="filterPane0" @click="hiddenFilter"></span>
        <section id="filterPanel">
            <!-- 点击 '分类-全部' 显示 -->
            <div v-if='categoryPopupStateData' class="filter_wrap" id="filter2">
                <div class="filter_content filterContent flex-box flex-box-vertical">
                    <div class="filterHeader">
                        <span @click='controlCategoryPopup()' class='back_icon'><i class="iconfont">&#xe90f;</i></span>
                        <i class="wap_icon_back"></i>{{$t('all')}}{{$t('category')}}
                    </div>
                    <div class="filter_item filterItem flex-item-1">
                        <ul class="filter_cate">
                            <li v-for='cate in filterData.cate'>
                                <div @click='filterOne(cate.cateName)' class='filterOne'> 
                                    <span>{{cate.cateName}}</span> 
                                    <span v-if='firstTitleStateData && firstTitleData && firstTitleData === cate.cateName' class='more_icon'><i class="iconfont">&#xe90e;</i></span>
                                    <span v-else class='more_icon'><i class="iconfont">&#xe90d;</i></span>
                                </div>
                                <div v-if='firstTitleStateData && firstTitleData && firstTitleData === cate.cateName' class='filterTwo'>
                                    <h5 @click='filterOneAll(cate.cateName)'>{{$t('all')}}</h5>
                                    <div class='filterTwo_subs' v-for='subs in cate.subs'>
                                        <div class='filterTwo_subs_cateName'>
                                            <div @click='filterTwo(cate.cateName, subs.cateName)' class='cateName'>
                                                <span>{{subs.cateName}}</span>
                                                <span v-if='secondTitleStateData && secondTitleData.oneData===cate.cateName && secondTitleData.twoData===subs.cateName' class='more_icon'><i class="iconfont">&#xe90e;</i></span>
                                                <span v-else class='more_icon'><i class="iconfont">&#xe90d;</i></span>
                                            </div>
                                            <div v-if='secondTitleStateData && secondTitleData.oneData===cate.cateName && secondTitleData.twoData===subs.cateName' class='filterThree'>
                                                <h5 @click='filterTwoAll(cate.cateName, subs.cateName)' id="cateAll">{{$t('all')}}</h5>
                                                <div @click='filterTwoItem(cate.cateName, subs.cateName, subss.cateName)' class='filterThree_sub' :class='{redf8584f:secondItemData && secondItemData[2] && secondItemData[2]===subss.cateName}' v-for='subss in subs.subs'>{{subss.cateName}}</div>
                                            </div>                                            
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>  
                    </div>
                </div>
            </div>
            <!-- 点击 (比如)'品牌-全部' 显示 -->
            <div v-if='categoryItemStateData' class="filterPannel3 filter_pannel_3 flex-box flex-box-vertical">
                <div class="categoryHeader" v-if='categoryItemData'>
                    <span @click='controlCategoryItem()' class='back_icon'><i class="iconfont">&#xe90f;</i></span>
                    <i class="wap_icon_back"></i>{{$t('all')}}{{categoryItemData.name}}
                </div>
                <ul class="filter_cates">
                    <li @click='controlCategoryItem()'>{{$t('all')}}</li>
                    <li @click='selectedHlight(categoryItemData.code, categoryItems), controlCategoryItem()' v-if='categoryItems' v-for='categoryItems in categoryItemData.value'>{{categoryItems.name}}</li>      
                </ul>                               
            </div>
            <div class="filter_wrap" id="filter1" v-if="filterPopupStateData">
                <div class="filter_content filterContent flex-box flex-box-vertical">
                    <!-- 点击筛选后显示的页面 -->
                        <p class='category_all' @click='controlCategoryPopup()'>{{$t('category')}} 
                            <label v-if='firstAllData' class="category">{{firstAllData}}</label>
                            <label v-if='secondAllData && secondAllData[0] && secondAllData[1]' class="category">{{secondAllData[0]}}/{{secondAllData[1]}}</label>
                            <label v-if='secondItemData && secondItemData[1] && secondItemData[2]' class="category">{{secondItemData[0]}}/{{secondItemData[1]}}/{{secondItemData[2]}}</label>
                            <i class="wap_icon_forward"></i>
                            <em>{{$t('all')}}</em>
                        </p>
                        <div class="filter_item filterItem flex-item-1 filter_view">
                            <ul>
                                <li v-if='item.name' v-for="(item,index) in filterData.others" :key='index'>
                                    <h5 @click='controlCategoryItem(item)' class="brand">{{item.name}}&nbsp;
                                        <i class="wap_icon_forward"></i>
                                        <label v-if="selectedInfoData && selectedInfoData[item.code] && selectedInfoData[item.code]['param'] && selectedInfoData[item.code]['param']['name']" :class='{redf8584f:selectedInfoData}'>{{selectedInfoData[item.code]['param']['name']}}</label>
                                        <em>{{$t('all')}}</em>
                                    </h5>
                                    <dl>               
                                        <dt :class="{redf8584f:selectedInfoData[item.code] && selectedInfoData[item.code]['param'] && selectedInfoData[item.code]['param']['code'] === items.code}" v-if="items && items.name" v-for="(items,index) in item.value" :key="index" @click="selectedHlight(item.code, items)">{{items.name}}</dt>
                                    </dl>
                                </li>
                            </ul>  
                        </div>
                    <div class="btn_area btnArea flex-box">
                        <div class="flex-item-1 reset">{{$t('reset')}}</div>
                        <div class="flex-item-1 ok">{{$t('confirm')}}</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import '../../../style/function.scss'
import '../../../style/var.scss'
import './css/listFilter.css'
import '../../../style/base.css'
export default {
    data() {
        return {
            selectIndex: null,
            arr: [],
            name: '',
            currentName: {},
            openTyoe: true,
            // 分类对象
            classify: {}
        }
    },
    props: {
        // 从父组件传递过来的数据
        filterData: {
            default: function() {
                return {}
            }               
        },
        filterPopupStateData: {
            default: function() {
                return {}
            }
        },
        categoryPopupStateData: {
            default: function() {
                return {}
            }
        },  
        firstTitleData: {
            default: function() {
                return {}
            }
        }, 
        firstTitleStateData: {
            default: function() {
                return {}
            }
        },        
        secondTitleData: {
            default: function() {   
                return {}
            }
        }, 
        secondTitleStateData: {
            default: function() {
                return {}
            }
        }, 
        selectedInfoData: {     
            default: function() {
                return {}
            }
        },
        // 获取点击全部分类中的一级标题中的全部，(比如)男装下的'全部
        firstAllData: {       
            default: function() {    
                return {}
            }
        },
        // 获取点击全部分类中的二级标题中的全部，(比如)男装-->T恤下的'全部' 
        secondAllData: {       
            default: function() {    
                return {}
            }
        },
        // 点击全部分类中的二级标题中的任意一项(除了全部)，(比如)男装-->T恤下的'长袖T恤'  
        secondItemData: {       
            default: function() {    
                return {}
            }
        },
        // 点击(比如) '品牌', 显示弹层,初始状态关闭    
        categoryItemStateData: {       
            default: function() {    
                return {}
            }
        },
        // 点击(比如) '品牌', 渲染'品牌'的数据    
        categoryItemData: {       
            default: function() {    
                return {}
            }
        }
    },
    computed: {         

    },
    methods: {
        // 点击当前元素高亮
        selectedHlight(code, param) {
            // code:(比如)品牌
            // param:(比如)361,获得当前点击元素的一些信息
            var data = {code, param}
            this.$emit('setSelectedInfo', data)
        },
        // 关闭点击筛选时的弹窗
        hiddenFilter() {
            this.$emit('hiddenPopup')
        },
        // 开启关闭点击全部分类时的弹窗
        controlCategoryPopup() {
            this.$emit('SetCategoryPopup')
        },
        filterOne(data) {
            this.$emit('setFirstTitle', data)   
        },
        filterTwo(oneData, twoData) {
            var data = {oneData, twoData}
            this.$emit('setSecondTitle', data)
        },
        // 点击全部分类中的一级标题中的全部，(比如)男装下的'全部'
        filterOneAll(data) {
            // 点击返回上一页
            this.controlCategoryPopup()
            this.$emit('setFirstAll', data)
        },
        filterTwoAll(...data) {
            // 点击返回上一页
            this.controlCategoryPopup()
            this.$emit('setSecondAll', data)                      
        },
        filterTwoItem(...data) {
            // 点击返回上一页
            this.controlCategoryPopup()            
            this.$emit('setSecondItem', data)
        },
        controlCategoryItem(data) {
            this.$emit('setCategoryItem', data)
        }    
    }
}
</script>



